<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <Header></Header>

    <!-- 轮播图 -->
    <div class="carousel-container">
      <div class="carousel-wrapper">
        <el-carousel height="auto" autoplay arrow="never">
          <el-carousel-item v-for="item in images" :key="item.id" style="height: 60vh">
            <img class="imga" :src="item.url" alt="未加载" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="options-wrapper">
        <div @click="handleOptionClick('/ship/check', '订单查询')">
          <div>
            <div><i class="iconfont">&#xe611;</i></div>
            <div>订单查询</div>
          </div>
        </div>
        <div @click="handleOptionClick('/ship/send/normal', '我要寄件')">
          <div>
            <div><i class="iconfont">&#xe893;</i></div>
            <div>我要寄件</div>
          </div>
        </div>
        <div @click="handleOptionClick('/','运费时效查询')">
          <div>
            <div><i class="iconfont">&#xe602;</i></div>
            <div>运费时效查询</div>
          </div>
        </div>
        <div @click="handleOptionClick('/','服务网点查询')">
          <div>
            <div><i class="iconfont">&#xe612;</i></div>
            <div>服务网点查询</div>
          </div>
        </div>
        <div @click="handleOptionClick('/','收寄范围查询')">
          <div>
            <div><i class="iconfont">&#xe620;</i></div>
            <div>收寄范围查询</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 物流服务介绍 -->
    <LogisticsIntro></LogisticsIntro>
    <!-- 新闻咨询 -->
    <News></News>

    <!-- 底部信息 -->
    <Bottom></Bottom>

    <!-- 智能客服助手 -->
    <AIAssistant />
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import { useAuthStore } from "@/store/userInfo";
import Header from "@/components/Header.vue";
import LogisticsIntro from "@/components/LogisticsIntro.vue";
import News from "@/components/News.vue";
import Bottom from "@/components/Bottom.vue";
import AIAssistant from "@/components/AIAssistant.vue";
import { Carousel } from "@/common/common";

const router = useRouter();
const authStore = useAuthStore();
type imageType = {
  id: string;
  url: string;
}
let images = reactive<imageType[]>([
  { id: "image1", url: Carousel.url1 },
  { id: "image2", url: Carousel.url2 },
  { id: "image3", url: Carousel.url3 },
]);
const handleOptionClick = (path: string, optionName: string) => {
  if (!authStore.isAuthenticated) {
    ElNotification({
      title: "提示",
      message: `请先登录!`,
      type: "warning",
    });
  } else {
    router.push(path);
  }
};
</script>
<style scoped lang="less">
@font-face {
  font-family: "iconfont";
  /* Project id 4410292 */
  src: url("//at.alicdn.com/t/c/font_4410292_me577n2kxch.woff2?t=1705655018464") format("woff2"),
    url("//at.alicdn.com/t/c/font_4410292_me577n2kxch.woff?t=1705655018464") format("woff"),
    url("//at.alicdn.com/t/c/font_4410292_me577n2kxch.ttf?t=1705655018464") format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 1.5rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.home {
  margin: 0;
  padding: 0;
  height: 100vh;
}

.carousel-container {
  width: 100%;
  height: 80vh;
  background-color: orange;
  display: flex;
  flex-direction: column;

  .carousel-wrapper {
    flex: 5;

    .imga {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .options-wrapper {
    flex: 2;
    display: flex;
    justify-content: space-evenly;

    >div {
      width: 20%;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
 cursor: pointer; /* 添加鼠标指针样式 */
      >div:first-child {
        height: 50%;
        width: 100%;
        background-color: black;
        display: flex;

        >div:first-child {
          flex: 1;
          background-color: red;
          display: flex;
          justify-content: center;
          align-items: center;
        }

         > div:nth-child(2) {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white; /* 直接设置文字颜色，不再使用 a 标签 */
        font-size: 1rem;
      }
      }
    }
  }
}
</style>
